<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Dashboard Template for Bootstrap</title>
  <!-- Bootstrap core CSS -->
  <link href="/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="/css/dashboard.css" rel="stylesheet">
  <style type="text/css">
    /* Chart.js */

    @-webkit-keyframes chartjs-render-animation {
      from {
        opacity: 0.99
      }
      to {
        opacity: 1
      }
    }

    @keyframes chartjs-render-animation {
      from {
        opacity: 0.99
      }
      to {
        opacity: 1
      }
    }

    .chartjs-render-monitor {
      -webkit-animation: chartjs-render-animation 0.001s;
      animation: chartjs-render-animation 0.001s;
    }
  </style>
</head>

<body>
<!--引入top bar-->
<div th:replace="emps/topbar::topbar">

</div>

<div class="container-fluid">
  <div class="row">

    <!--引入side bar-->
    <div th:replace="emps/sidebar::sidebar(activeUrl='emps')">

    </div>

    <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
      <!--需要区分是员工修改还是添加；-->
      <form th:action="@{/emp}" method="post">
        <!--添加隐藏域，用于发送put请求修改表单-->
        <input type="hidden" name="_method" value="put" th:if="${emp!=null}"/>
        <input type="hidden" name="id" th:if="${emp!=null}" th:value="${emp.id}">
        <div class="form-group">
          <label>LastName</label>
          <input name="lastName" type="text" class="form-control" placeholder="zhangsan" th:value="${emp}!=null?${emp.lastName}:''">
        </div>

        <div class="form-group">
          <label>Email</label>
          <input name="email" type="text" class="form-control" placeholder="xxx@qq.com"
                 th:value="${emp}!=null?${emp.email}:''">
        </div>

        <div class="form-group">
          <label>Gender</label>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="gender" value="1" th:checked="${emp}!=null?(${emp.gender}==1):false">
            <label class="form-check-label">男</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="gender" value="0" th:checked="${emp}!=null?(${emp.gender}==0):false">
            <label class="form-check-label">女</label>
          </div>
        </div>

        <div class="form-group">
          <label>Department</label>
          <select class="form-control" name="department.id">
            <option th:selected="${dept.id == emp.department.id}" th:value="${dept.id}" th:each="dept:${departments}" th:text="${dept.departmentName}" th:if="${emp!=null}"></option>
            <option th:value="${dept.id}" th:each="dept:${departments}" th:text="${dept.departmentName}" th:if="${emp==null}"></option>
          </select>
        </div>

        <div class="form-group">
          <label>Birth</label>
          <input name="birth" type="text" class="form-control" placeholder="2017/01/01 12:23" th:value="${emp!=null}?${#dates.format(emp.birth,'yyyy/MM/dd HH:mm')}">
        </div>
        <button type="submit" class="btn btn-primary" th:text="${emp==null}?'添加':'修改'">添加</button>
      </form>
    </main>

  </div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="/js/jquery-3.2.1.slim.min.js" ></script>
<script type="text/javascript" src="/js/popper.min.js" ></script>
<script type="text/javascript" src="/js/bootstrap.min.js" ></script>

<!-- Icons -->
<script type="text/javascript" src="/js/feather.min.js" ></script>
<script>
  feather.replace()
</script>


</body>

</html>
